 <template>
  <div class="scrollerWrap">
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller" noDataText="">
      <div class="mall-wrapper">
        <Banner/>

        <div class="order-wrap">
          <div class="order-box">
            <div v-for="(item, index) in quanlist" :key="item.quan_id" class="item-box">
              <div class="box-l">
                <div class="img-wrap">
                  <img class="ad-img" :src="constant.api_url + item.quan_img">
                </div>
              </div>

              <div class="box-r">
                <p class="title-01">{{item.quan_title}}</p>
                <p class="txt-01"></p>
                <div class="intergration-box">
                  <p class="intergration-txt">
                    <span>所需积分：</span>
                    <span>{{item.score}}</span>
                    分
                  </p>
                </div>

                <div class="func-box">
                  <div class="box-l">
                    <div class="cartcontrol-wrapper">
                      <div class="cartcontrol">
                        <transition name="move">
                          <div class="cart-decrease">
                            <i class="icon iconfont icon-jianhao" @click="sub(index)"></i>
                          </div>
                        </transition>
                        <div class="cart-count">
                          <span>{{item.num||'1'}}</span>
                        </div>
                        <div class="cart-add">
                          <i class="icon iconfont icon-jiahao" @click="add(index)"></i>
                        </div>
                      </div>
                    </div>
                  </div>

                  <button class="buy-btn" @click="mdlClick(index)">立即兑换</button>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="submit-box">
        <button class="submit-btn" @click="quan_list">下拉加载更多</button>
          </div>-->
          <div class="linewrapper" v-if="is_bottom">
            <span class="line"></span>
            <span class="linecontent">我是有底线的</span>
            <span class="line"></span>
          </div>
        </div>

        <mdlDialog v-if="mdlShow" :mdlShowSub="mdlShow" @emtMdlClose="mdlCloseClick"/>
      </div>
    </scroller>
  </div>
</template>

 <script type="text/ecmascript-6">
import Banner from "@/components/banner";
import mdlDialog from "@/components/modal";
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";
import { formatTime} from "@/utils/index.js";

export default {
  name: "mall",
  data() {
    return {
      mdlShow: false,
      quanlist: [],
      constant: constant,
      p: 0,
      is_bottom: false
    };
  },
  components: {
    Banner,
    mdlDialog
  },
  methods: {
    mdlCloseClick() {
      this.mdlShow = false;
    },
    mdlClick(index) {
      let item = this.quanlist[index];
      if (item != null) {
        if (!item.hasOwnProperty("num")) {
          this.$set(this.quanlist[index], "num", 1);
        }

        this.quan_exchange(item);
      }
      //this.mdlShow = val;
    },
    add(index) {
      let item = this.quanlist[index];
      if (item != null) {
        if (!item.hasOwnProperty("num")) {
          this.$set(this.quanlist[index], "num", 2);
        } else {
          this.quanlist[index].num++;
        }
      }
    },
    sub(index) {
      let item = this.quanlist[index];
      if (item != null) {
        if (!item.hasOwnProperty("num")) {
          item["num"] = 1;
        } else {
          if (item.num > 1) {
            this.quanlist[index].num--;
          } else {
            this.quanlist[index].num = 1;
          }
        }
      }
    },
    quan_exchange(item) {
      http.get(this, {
        url: "quan/quan_exchange",
        data: {
          quan_id: item.quan_id,
          num: item.num,
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("积分兑换:", data);
          if (data.status == 1) {
            this.mdlShow = true;
          } else {
            this.$message.error(data.info);
          }
        }
      });
    },
    quan_list() {
      this.p++;
      http.get(this, {
        url: "quan/quan_list",
        data: {
          pagesize: 3,
          p: this.p,
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("积分商城:", data);
          if (data.status == 1) {
            let info = data.info;
            if (this.p <= info.total_page) {
              this.quanlist = this.quanlist.concat(info.list);
              this.is_bottom = false;
            } else {
              this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
              this.is_bottom = true;
            }
          }
        }
      });
    },
    // 下拉刷新
    refresh(done) {
      this.p = 0; //重置页数刷新每次页数都是第一页
      this.is_bottom = false; //重置数据判断
      setTimeout(
        function() {
          this.quan_list();
          this.$refs.myscroller.finishPullToRefresh(); //刷新完毕关闭刷新的转圈圈
          done();
        }.bind(this),
        1700
      );
    },
    // 上拉加载
    infinite(done) {
      if (this.is_bottom) {
        this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
      } else {
        setTimeout(() => {
          this.quan_list();
          done(); //进行下一次加载操作
        }, 1500);
      }
    }
  },
  watch: {
    $route(router) {
      if (router.name == "center") {
        console.log("监听", router);
        // this.quanlist = [];
        // this.p = 0;
        // this.quan_list();
      }
    }
  },
  created() {
    this.is_bottom = false;
    //this.quan_list();
  },
  activated() {
    this.is_bottom = false;
  }
};
</script>

 <style scoped lang="scss">
.mall-wrapper {
}

.scrollerWrap{
    position:absolute;
    width:100%;
    height:90%;//有header的时候可能会出现滚动条，所以最好高度是除去header的高度
    top:1rem;//一般页面有header的时候需要留出header的高度
    bottom:0.5rem;
    main{
      height:100%;
    }
  }

.linewrapper {
  margin: 0;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 0.3rem;
}
.line {
  display: inline-block;
  width: 2rem;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  vertical-align: middle;
}

.order-wrap {
  .order-box {
    padding: 0.2rem 0;

    .item-box {
      padding: 0 0.16rem;
      @extend .cmm-clearfix;
      margin-top: 0.3rem;
      $letHeight: 2.36rem;
      height: $letHeight;

      &:first-child {
        margin-top: 0;
      }

      .box-l {
        width: 3.5rem;
        float: left;

        .img-wrap {
          width: 100%;
          height: $letHeight;
          overflow: hidden;
          position: relative;
          border-radius: 0.2rem;

          .ad-img {
            @extend .cmm-translateXY;
            width: 100%;
          }
        }
      }

      .box-r {
        float: left;
        width: 3.6rem;
        padding-left: 0.32rem;

        .title-01 {
          font-size: 0.26rem;
          color: $c-mainC;
          overflow: hidden;
          padding: 0.2rem 0;
          @extend .cmm-txtOverflow;
        }

        .txt-01 {
          font-size: 0.24rem;
          color: $c-mainC;
          height: 0.53rem;
          overflow: hidden;
          padding: 0rem 0;
        }

        .intergration-box {
          $letHeight: 0.43rem;
          .intergration-txt {
            width: 100%;
            text-align: left;
            font-size: 0.32rem;
            color: $c-themeC;
            line-height: $letHeight;
          }

          span {
            display: inline-block;
            line-height: $letHeight;
            float: left;
          }

          .icon {
            font-size: 0.4rem;
            margin-right: 0rem;
          }

          .buy-btn {
            width: 1.66rem;
            display: inline-block;
            float: right;
            border-radius: 0.8rem;
            background-color: $c-themeBg;
            font-size: 0.28rem;
            font-weight: normal;
            color: $c-white-light;
            height: $letHeight;
            line-height: $letHeight;
            text-align: center;
          }
        }

        .func-box {
          $letHeight: 0.43rem;
          margin-top: 0.22rem;
          .price-txt {
            width: 50%;
            float: left;
            text-align: left;
          }

          .box-l {
            width: 50%;
            float: left;
          }

          span {
            line-height: 0.5rem;
            font-size: 0.26rem;
            display: inline-block;
          }

          i {
            line-height: 0.5rem;
            font-size: 0.46rem;
          }

          .buy-btn {
            width: 50%;
            display: inline-block;
            float: right;
            border-radius: 0.8rem;
            background-color: $c-themeBg;
            font-size: 0.28rem;
            font-weight: normal;
            color: $c-white-light;
            height: $letHeight;
            line-height: $letHeight;
            text-align: center;
          }
        }
      }
    }
  }
}

.cartcontrol {
  font-size: 0;
}

.cartcontrol .cart-decrease {
  display: inline-block;
  color: #b4b4b4;
}

.cartcontrol .cart-add .bg {
  position: absolute;
  z-index: -1;
}

.cartcontrol .cart-count {
  display: inline-block;
  width: 0.62rem;
  height: 0.5rem;
  text-align: center;
  font-size: 0.26rem;
  vertical-align: top;
  border: 0.02rem solid $c-gray-dark;
}

.cartcontrol .cart-add {
  display: inline-block;
  position: relative;
}

.move-enter-active,
.move-leave-active {
  transition: all 0.3s linear;
}

.move-enter,
.move-leave-to {
  transform: translateX(20px) rotate(180deg);
}
</style>
